$font-size0: 14;
/**
 改变$step， 就能适配web和移动端x2设计稿
*/
$step: 1;
$dirlist: top,
bottom,
left,
right;

html,
body {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    font-size: 14px;
}

/*! font-size */

.font-size-inherit {
    font-size: inherit;
}

@for $i from -10 through 30 {
    .font#{$i} {
        font-size: (($font-size0 + $i)+#{$unit});
    }
}


/*! margin padding */

.marginXauto {
    margin: 0 auto
}

$i: $step * 50;

@while $i>-1 {
    .margin#{$i} {
        margin-top: #{$i}#{$unit};
        margin-bottom: #{$i}#{$unit};
        margin-left: #{$i}#{$unit};
        margin-right: #{$i}#{$unit};
    }

    .marginY#{$i} {
        margin-top: #{$i}#{$unit};
        margin-bottom: #{$i}#{$unit};
    }

    .marginX#{$i} {
        margin-left: #{$i}#{$unit};
        margin-right: #{$i}#{$unit};
    }

    .marginT#{$i} {
        margin-top: #{$i}#{$unit};
    }

    .marginB#{$i} {
        margin-bottom: #{$i}#{$unit};
    }

    .marginR#{$i} {
        margin-right: #{$i}#{$unit};
    }

    .marginL#{$i} {
        margin-left: #{$i}#{$unit};
    }

    .padding#{$i} {
        padding-top: #{$i}#{$unit};
        padding-bottom: #{$i}#{$unit};
        padding-left: #{$i}#{$unit};
        padding-right: #{$i}#{$unit};
    }

    .paddingY#{$i} {
        padding-top: #{$i}#{$unit};
        padding-bottom: #{$i}#{$unit};
    }

    .paddingX#{$i} {
        padding-left: #{$i}#{$unit};
        padding-right: #{$i}#{$unit};
    }

    .paddingT#{$i} {
        padding-top: #{$i}#{$unit};
    }

    .paddingB#{$i} {
        padding-bottom: #{$i}#{$unit};
    }

    .paddingL#{$i} {
        padding-left: #{$i}#{$unit};
    }

    .paddingR#{$i} {
        padding-right: #{$i}#{$unit};
    }

    $i: $i - $step;
}

.padding0force {
    padding: 0 !important;
}

.margin0force {
    margin: 0 !important;
}

$i: $step * 50;

@while $i>-1 {
    @each $dir in $dirlist {
        .margin-#{$dir}#{$i} {
            margin-#{$dir}: #{$i}#{$unit};
        }

        .padding-#{$dir}#{$i} {
            padding-#{$dir}: #{$i}#{$unit};
        }
    }

    $i: $i - $step;
}


/*! border */

.border-none {
    border: none !important;
}

.border1 {
    border: (1+#{$unit}) solid $color-border;
}

.border-4 {
    border: (1+#{$unit}) solid $color-4;
}

.border1dashed {
    border: (1+#{$unit}) dashed $color-border;
}

.border1theme {
    border: (1+#{$unit}) solid $color-theme;
}

.border1white {
    border: (1+#{$unit}) solid $color-white;
}

.border1-transparent {
    border: (1+#{$unit}) solid transparent;
}

@each $dir in $dirlist {
    .border-#{$dir}1 {
        border-#{$dir}: (1+#{$unit}) solid $color-border;
    }

    .border-#{$dir}1-dash {
        border-#{$dir}: (1+#{$unit}) dashed $color-dash;
    }
}


/*! border-radius */

.radius50 {
    border-radius: 50%;
}

.radius100 {
    border-radius: 100%;
}

$i: 40;

@while $i>-1 {
    .radius#{$i} {
        border-radius: #{$i}#{$unit};
    }

    $i: $i - 1;
}


/*! float */

.float-left {
    float: left;
}

.float-right {
    float: right;
}


/*! width */

.width25 {
    width: 25%;
}

.width33 {
    width: 33.3%;
}

.width50 {
    width: 50%;
}

.width100 {
    width: 100%;
}


/*! height */

.height100 {
    height: 100%;
}

.height-auto {
    height: auto;
}


/*! line-height */

$i: $step * 50;

@while $i>0 {
    .line-height#{$i} {
        line-height: #{$i}#{$unit};
    }

    $i: $i - $step;
}


/*! display */

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.display-none {
    display: none;
}


/*! position */

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.translateX {
    left: 50%;
    transform: translateX(-50%);
}

.translateY {
    top: 50%;
    transform: translateY(-50%);
}

.translateXY {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

$i: $step * 50;

@while $i>-($step * 50) {
    @each $dir in $dirlist {
        .#{$dir}#{$i} {
            #{$dir}: #{$i}#{$unit};
        }
    }

    $i: $i - $step;
}


/*! text-align */

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.line-through {
    text-decoration: line-through;
}

.underline {
    text-decoration: underline !important;
}

/*! rotate */

.rotate90 {
    transform: rotate(90deg);
}

.rotate180 {
    transform: rotate(180deg);
}


/*! flex */

.flex {
    display: flex;
}

.flex1 {
    flex: 1
}

.flex-center {
    display: flex;
    justify-content: center;
}

.flex-align {
    display: flex;
    align-items: center;
}

.flex-align-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.scroll-dx {
    overflow-x: auto;
    overflow-y: hidden;
}

.flex-align-start {
    display: flex;
    justify-content: flex-start;
    align-content: center;
}

.flex-align-end {
    display: flex;
    justify-content: flex-end;
    @extend .flex-align;
}

.flex-baseline {
    display: flex;
    align-items: baseline;
}

.flex-around {
    display: flex;
    justify-content: space-around;
}

.flex-between {
    display: flex;
    justify-content: space-between;
}

.flex-align-around {
    @extend .flex-align;
    @extend .flex-around;
}

.flex-align-between {
    @extend .flex-align;
    @extend .flex-between;
}

.flex-baseline-around {
    @extend .flex-baseline;
    @extend .flex-around;
}

.flex-baseline-between {
    @extend .flex-baseline;
    @extend .flex-between;
}

.flex-nowrap {
    display: flex;
    flex-wrap: nowrap;
}

.flex-wrap {
    display: flex;
    flex-wrap: wrap;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-column-between {
    @extend .flex-column;
    justify-content: space-between;
}

.flex-column-around {
    @extend .flex-column;
    justify-content: space-around;
}

.flex-column-align {
    @extend .flex-column;
    align-items: center;
}

.flex-column-center {
    @extend .flex-column;
    justify-content: center;
}

.flex-column-align-center {
    @extend .flex-column-align;
    justify-content: center;
}

.itemflex-00auto {
    flex: 0 0 auto;
}

.itemflex-11auto {
    flex: 1 1 auto;
}

.flex-shrink0 {
    flex-shrink: 0;
}

.align-self-stretch {
    align-self: stretch;
}


/*! cursor */

.cursor {
    cursor: pointer;
}

.cursor-default {
    cursor: default;
}


/*! justify */

.justify {
    text-align: justify;
    text-align-last: justify;
}

.justify:after {
    display: inline-block;
    content: '';
    width: 100%;
}


/*! opacity */

$i: 10;

@while $i>=0 {
    .opacity_#{$i} {
        opacity: 0.1 * $i;
    }

    $i: $i - 1;
}


/*! word-break */

.break-all {
    word-break: break-all;
}

.break-word {
    word-break: break-word;
}


/* white-space */

.pre-wrap {
    white-space: pre-wrap;
}

.nowrap {
    white-space: nowrap;
}


/*! scroll */

.scroll-x {
    overflow-x: scroll;
}

.scroll-y {
    overflow-y: scroll;
}

.scroll-auto {
    overflow: auto;
}

.overflow-hidden {
    overflow: hidden;
}

// line
.line-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@for $i from 1 through 10 {
    .line-limited#{$i} {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: $i;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}


/*! other */

.bold {
    font-weight: bold;
}

.clear {
    overflow: hidden;
}

.clear-both {
    clear: both;
}

.inline-middle {
    display: inline;
    vertical-align: middle;
}

.border-box {
    box-sizing: border-box;
}

.visibility-visible {
    visibility: visible;
}

.visibility-hidden {
    visibility: hidden;
}

.shadow {
    box-shadow: 0 0 10#{$unit} 1#{$unit} #ccc;
}

.divide-height {
    height: 20#{$unit};
    background-color: $color-divide;
}

.main,
.main-white {
    margin: 10px 12px;

    .empty {
        width: 100px;
    }
}

.main {
    min-height: calc(100vh - 88px - 20px);
}

.main-white {
    background-color: white;
    border-radius: 4px;
    padding: 10px 12px;
    padding-bottom: 5px;
    min-height: calc(100vh - 88px - 20px - 15px);

    &.fix {
        height: calc(100vh - 88px - 20px - 15px);
        overflow-y: scroll;
    }
}

.el-drawer {
    .el-form {
        width: 80%;
    }
}

.tip {
    color: #666;
    font-size: 12px;
}

.must::before {
    content: '*';
    color: #F56C6C;
    margin-right: 4px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input[type="number"] {
    -moz-appearance: textfield;
}

::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 3px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 0px;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
    background: #ededed;
    border-radius: 3px;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 3px;
    background-color: #409eff;
    background-image: -webkit-linear-gradient(45deg,
            rgba(255, 255, 255, 0.1) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.1) 50%,
            rgba(255, 255, 255, 0.1) 75%,
            transparent 75%,
            transparent);
}


.main,
.main-white {
    margin: 10px 12px;

    .empty {
        width: 100px;
    }
}

.main {
    min-height: calc(100vh - 84px - 20px);
}

.main-white {
    background-color: white;
    border-radius: 4px;
    padding: 10px 12px;
    padding-bottom: 5px;
    // height: calc(100vh - 84px - 20px - 20px);

    &.fix {
        height: calc(100vh - 84px - 20px - 20px);
        overflow-y: scroll;
    }
}

.table-image {
    width: 50px;
    height: 50px;
    border-radius: 4px;
}

.normal-image {
    width: 100px;
    height: 100px;
    border-radius: 6px;
}

.large-image {
    width: 140px;
    height: 140px;
    border-radius: 10px;
}